<template>
    <div ref="scroll">
      <slot></slot>
    </div>
</template>

<script type="text/ecmascript-6">
  import BScroll from 'better-scroll'
    export default {
        name: "scroll",
      props:{
          // 1 滚动的时候会派发scroll事件，会截流。2滚动的时候实时派发scroll事件，不会截流。 3除了实时派发scroll事件，在swipe的情况下仍然能实时派发scroll事件
          probeType:{
            type:Number,
            default:1
          },
        //监听
        listenScroll:{
          type:Boolean,
          default:false
        },
        //watch 监听data里面的数据的变化  /dom初始化完成后可以计算滚动的高度
        click:{
          type: Boolean,
          default: true
        },
        data:{
            type:Array,
            default:null
        },
        //滚动开始之前触发
        beforeScroll: {
          type: Boolean,
          default: false
        },
        refreshDelay: {
          type: Number,
          default: 20
        },
        //是否上滑刷新
        pullup:{
          type:Boolean,
          default:false
        },
        beforeScroll:{
          type:Boolean,
          default:false
        }
      },
      methods:{
         //初始化
        _initScroll(){
          if(!this.$refs.scroll){
            return
          }
          this.scroll = new BScroll(this.$refs.scroll,{
            probeType: this.probeType,
            click: this.click
          })
          //监听scroll实时的位置
          if(this.listenScroll){
            let me = this
            this.scroll.on('scroll',(pos) => {
              //给listView派发事件     滚动时实时监听位置
              me.$emit('scroll',pos)
            })
          }

          //判断到滚动底部====不做业务逻辑，只派发事件===========上拉刷新
          if(this.pullup){
            //scrollEnd  scroll滚动停止
            this.scroll.on('scrollEnd',() => {
              if(this.scroll.y <= (this.scroll.maxScrollY + 50) ){
                //scrollToEnd   scroll滚动到底部了
                this.$emit('scrollToEnd')
              }
            })
          }

          if(this.beforeScroll){
            this.scroll.on('beforeScrollStart',()=>{
              this.$emit('beforeScroll')
            })
          }
        },
        enable(){
          this.scroll && this.scroll.enable()
        },
        disable(){
          this.scroll && this.scroll.disable()
        },
        refresh(){
          this.scroll && this.scroll.refresh()
        },
        //滚动到某个位置
        scrollTo(){
          // apply 调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.apply(A, arguments);即A对象应用B对象的方法
          this.scroll && this.scroll.scrollTo.apply(this.scroll,arguments)
        },
        //滚动到某个元素
        scrollToElement(){
          this.scroll && this.scroll.scrollToElement.apply(this.scroll,arguments)
        }
      },
      mounted(){
        //确保滚动事件一定会发生
        setTimeout(()=>{
          this._initScroll()
        },20)
      },
      watch:{
          data(){
            setTimeout(() => {
              this.refresh()
            },20)
        }
      }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus">

</style>
